<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>index</title>

    <!--Bootstrap-->
    <link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="static/js/jquery-1.12.4.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <!--关联外部js文件-->
    <!--关联外部的js文件时，只可以用这种形式<script></script>-->
    <script type="text/javascript" src="index.js"></script>
</head>
<body>

<!-- 新增Modal id="myModal" -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <!-- 模态框内容 -->
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <!-- 模态框头部的关闭按钮 -->
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <!-- 模态框头部的标题 -->
                <h4 class="modal-title" id="myModalLabel">新增员工</h4>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <!-- form id="emp_add_form" -->
                <form class="form-horizontal" id="emp_add_form" autocomplete="off">
                    <!-- form表单组件 -->
                    <div class="form-group">
                        <label for="empName_form_input" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 姓名输入框 id="empName_form_input" -->
                            <input type="text" class="form-control " name="empName" id="empName_form_input"
                                   placeholder="输入姓名并按下Enter对姓名进行检测" spellcheck =“false”>
                            <span class="help-block">提示信息</span>
                        </div>
                        <div class="col-sm-1">
                            <!-- 测试输入框按钮 id="test_emp_name_btn" -->
                            <button type="button" class="btn btn-success btn-sm" id="test_emp_name_btn" name="testName">
                                测试姓名
                            </button>
                        </div>
                    </div>
                    <!-- form表单组件 -->
                    <div class="form-group">
                        <label for="gender1" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-8">
                            <label class="radio-inline">
                                <!-- 性别选择输入框 id="gender1" -->
                                <input type="radio" name="gender"  id="gender1" value="M" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <!-- 性别选择输入框 id="gender2" -->
                                <input type="radio" name="gender" id="gender2" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <!-- form表单组件 -->
                    <div class="form-group">
                        <label for="email_form_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 邮箱账号输入框 id="email_form_input" -->
                            <input type="email" class="form-control" name="email" id="email_form_input"
                                   spellcheck =“false” placeholder="xxx@xxx.xxx">
                            <span class="help-block">
                                </span>
                        </div>
                    </div>
                    <!-- form表单组件 -->
                    <div class="form-group">
                        <label for="departId" class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-3">
                            <!-- 部门选择框 id="departId" -->
                            <select class="form-control" id="departId" name="departId">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <!-- 模态框尾部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!-- 新增员工模态框提交按钮 id="emp_save_button" -->
                <button type="button" class="btn btn-primary" id="emp_save_button">保存</button>
                <a title="提示" data-container="body" data-toggle="popover" data-placement="right"
                   data-content="请填写正确格式的信息"  id="tips">
                    &nbsp;</a>
            </div>
        </div>
    </div>
</div>

<!-- 更新的Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="editModalLabel">更新员工</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="emp_edit_form">
                    <div class="form-group">
                        <label for="empName_form_input" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 更新模态框 姓名输入框 id = "empName_update" -->
                            <p class="form-control-static" id="empName_update"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="gender1" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-8" id="emp_update_gender">
                            <label class="radio-inline">
                                <!-- 性别选择 男 id = "nan" -->
                                <input type="radio" name="gender_update" id="nan" value="M" > 男
                            </label>
                            <label class="radio-inline">
                                <!-- 性别选择 女 id = "nv" -->
                                <input type="radio" name="gender_update" id="nv" value="F"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="email_form_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 邮箱输入框 id = "email_form_input_update" -->
                            <input type="email" class="form-control" name="email" id="email_form_input_update"
                                   spellcheck =“false” placeholder="xxx@xxx.xxx" autocomplete="off">
                            <span class="help-block">
                                    提示信息
                                </span>
                        </div>
                    </div>
                    <div class="form-group" >
                        <label for="departId_update" class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-3" id="departId_update_div">
                            <!-- 部门选择框 id  = “departId_update” -->
                            <select class="form-control" id="departId_update" name="departId_update">
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_button">更新</button>
                <a title="提示" data-container="body" data-toggle="popover" data-placement="right"
                   data-content="请填写正确格式的信息"  id="tips_update">
                    &nbsp;</a>
            </div>
        </div>
    </div>
</div>

<!-- 组合查询的Modal -->
<div class="modal fade" id="queryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">查询员工</h4>
            </div>
            <div class="modal-body">
                <!-- 组合查询表单 form  id="emp_query_form"-->
                <form class="form-horizontal" id="emp_query_form" autocomplete="off">
                    <div class="form-group">
                        <label for="empName_form_input" class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 通过员工ID查询员工  id="empId_form_input_query" -->
                            <input type="text" class="form-control " name="empName" id="empId_form_input_query"
                                   placeholder="输入要查询员工的ID" spellcheck =“false”>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="empName_form_input" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 通过员工姓名查询员工 id="empName_form_input_query" -->
                            <input type="text" class="form-control " name="empName" id="empName_form_input_query"
                                   placeholder="输入要查询员工的姓名" spellcheck =“false”>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="gender1" class="col-sm-2 control-label">性别</label>
                        <div class="col-sm-8">
                            <label class="radio-inline">
                                <!-- 性别选择框  name=“gender” -->
                                <input type="radio" name="gender"   value="M"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender"  value="F"> 女
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender"  value="N" checked="checked"> 不选择
                            </label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="email_form_input" class="col-sm-2 control-label">邮箱</label>
                        <div class="col-sm-8  has-feedback">
                            <!-- 通过邮件来查询员工  id="email_form_input_query" -->
                            <input type="email" class="form-control" name="email" id="email_form_input_query"
                                   spellcheck =“false” placeholder="xxx@xxx.xxx">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="departId" class="col-sm-2 control-label">部门</label>
                        <div class="col-sm-3" >
                            <!-- 通过部门来查询员工  id="departId_query" -->
                            <select class="form-control" id="departId_query" name="departId">

                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <!-- 组合查询模态框关闭按钮 -->
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!-- 组合模态框查询按钮  id="emp_query_button" -->
                <button type="button" class="btn btn-primary" id="emp_query_button">查询</button>
                <a title="提示" data-container="body" data-toggle="popover" data-placement="right"
                   data-content="请先填要查询的条件"  id="tips_query">
                    &nbsp;</a>
            </div>
        </div>
    </div>
</div>

<!-- 1.标题 -->
<div class="row text-center">
    <div class="col-md-4">
        <h1>SSM-CRUD</h1>
    </div>
</div>

<!-- 2.三个按钮 -->
<div class="row text-center">
    <div class="col-md-6 col-md-offset-6">
        <button type="button" class="btn btn-primary btn-lg" id="emp_Add_modal_Btn">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
            新增
        </button>
        <button type="button" class="btn btn-info btn-lg" id="emp_query_modal_btn">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
            查询
        </button>
        <button type="button" class="btn btn-danger btn-lg" id="emp_delete_selected_btn">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            删除
        </button>
    </div>
</div>

<!-- 3.表格-->
<div class="row">
    <div class="col-md-10 col-md-offset-1 table-responsive">
        <table class="table table-hover " id="emps_table">
            <!-- caption：说明文件 -->
            <caption>
                <h4 id="table_head">员工表</h4>
                <div>
                        <span class="col-md-offset-2 ">
                            <span id="query_info"></span>
                            <!-- 将鼠标放在此图标上会显示title中的内容 -->
                            <a class="glyphicon " id="query_icon" href="#" title="点击删除查询条件"></a>
                        </span>
                </div>
            </caption>
            <!-- thead：设计表头样式 -->
            <thead>
            <tr>
                <th><input type="checkbox" id="check_all_page"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>邮箱</th>
                <th>部门</th>
                <th>操作</th>
            </tr>
            </thead>
            <!-- tbody：员工数据主体 -->
            <tbody>
            </tbody>
        </table>
    </div>

    <!-- 4.分页条-->
    <div class="row text-center">
        <div class="col-md-10 col-md-offset-1">
            <nav aria-label="Page navigation" id="page_nav"></nav>
        </div>
    </div>

    <!-- 5.页数信息-->
    <div class="row text-center">
        <div class="col-md-10 col-md-offset-1" id="page_info">每页显示记录： 当前页数： 总记录数：</div>
    </div>
</div>

</body>
</html>